<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象属性的操作</title>
</head>
<body>
    <script>
        var obj = {name:"张三",age:18,gender:"男"};
        document.write('<p style="color:red;">访问对象属性：</p>')
        document.write('<p style="color:red;">方法一：对象名["属性名"]</p>')
        document.write('<p>obj["name"]</p>')
        console.log(obj["name"]);
        document.write('<p>obj["age"]</p>')
        console.log(obj["age"]);
        document.write('<p style="color:red;">方法二：对象名.属性名</p>')
        document.write('<p>obj.name</p>')
        console.log(obj.name);
        document.write('<p>obj.age</p>')
        console.log(obj.age);
        document.write('<p style="color:red;">对象添加属性：</p>')
        document.write('<p style="color:red;">方法一：对象.新属性名 = 值;</p>')
        document.write('<p>obj.address = "北京"</p>')
        obj.address = "北京";
        document.write('<p style="color:red;">方法二：对象["新属性名"] = 值;</p>')
        obj["color"] = "red";
        console.log(obj);
        document.write('<p style="color:red;">对象属性的修改：</p>')
        document.write('<p style="color:red;">方法一：对象.属性名 = 新值;</p>')
        document.write('<p>obj.address = "上海"</p>')
        obj.address = "上海";
        document.write('<p style="color:red;">方法二：对象["属性名"] = 新值;</p>')
        obj["color"] = "blue";
        console.log(obj);
        document.write('<p style="color:red;">对象属性的删除：删除的是属性名及其值</p>')
        document.write('<p style="color:red;">方法一：delete 对象.属性名;</p>')
        document.write('<p>delete obj.address</p>')
        delete obj.address;
        document.write('<p>delete obj["color"]</p>')
        delete obj["color"];
    </script>
</body>
</html>